<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <!-- <div id="main" style="width: 600px;height:400px;"></div>

    <script src="./lib/echarts.min.js"></script>
    <script>
        // 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.querySelector('#main'))

// 指定图表的配置项和数据
const option = {
  // 标题
  title: {
    // 标题的文本
    text: '商品销量'
  },
  tooltip: {},
  legend: {
    data: ['价格'],
    right:35,
    itemStyle:{
        color:'#96C9E5'
    }

  },
  xAxis: {
    data: ['西兰花', '西瓜', '西葫芦', '西北风', '西红柿', '西芹', '西洋菜']
  },
  yAxis: {},
  series: [
    {
      name: '价格',
      type: 'bar',
      data: [150, 230, 220, 30, 130, 140, 266]
    }
  ],
  color: ['#86cce9']
}

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
    </script>
</body>
</html> -->















<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF - 8">
  <title>Class Salary Distribution</title>
  <!-- 引入ECharts库 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
</head>

<body>
    <script src="./lib/echarts.min.js"></script>
  <!-- 为ECharts准备一个定义了宽高的DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 数据
    var data = [
      { value: 20, name: '1万以下', itemStyle: { color: 'orange' } },
      { value: 30, name: '1-1.5万', itemStyle: { color: 'lightblue' } },
      { value: 40, name: '1.5-2万', itemStyle: { color: 'blue' } },
      { value: 10, name: '2万以上', itemStyle: { color: 'lightgreen' } }
    ];

    // 配置项
    var option = {
      title: {
        text: '班级薪资分布',
        left: 'center'
      },
      series: [
        {
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>

</html>
